<template>
  <div id="login">
    <div class="form">
      <a-form  :form="LoginForm" class="LoginForm">
        <a-form-item label="账号"
					:label-col="{ span: 5 }"
      		:wrapper-col="{ span: 16 }" 
				>
          <a-input v-model="LoginForm.account" placeholder="请输入邮箱" />
        </a-form-item>
        <a-form-item 
					label="密码" 
					:label-col="{ span: 5 }"
					:wrapper-col="{ span: 16}"
				>
          <a-input type="password" v-model="LoginForm.pwd" placeholder="请输入密码"></a-input>
        </a-form-item>
        <a-button class="button" type="primary" size="middle" @click="submitForm()">登录</a-button>
      </a-form>
    </div>
  </div>
</template>

<script>
import { login } from "@/api/root";
import store from "@/store/index.js";
import { Button, message, Form, Input } from 'ant-design-vue';

export default {
	components: {
		AButton: Button,
		AForm: Form,
		AInput: Input,
		AFormItem: Form.Item,
	},
  data() {
    return {
      LoginForm: {
        account: "",
        pwd: ""
      }
    };
  },
  methods: {
    submitForm() {
      login(this.LoginForm).then(res => {
        // console.log(res);
        store.commit("setLogin", res.dat.token);
        this.$router.push({ path: "/system-manage" });
      });
    }
  }
};
</script>
<style>
#login {
  position: relative;
  height: 100%;
  background: url("../assets/bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.form {
  width: 380px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -190px;
  margin-top: -190px;
  /* border: 1px solid #ccc; */
	background-color: #fff;
	border-radius: 10px;
	
}
.LoginForm {
  padding: 50px;
}
.form button {
  width: 300px;
  margin-top: 20px;
}

</style>
